<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新闻列表</title>
</head>
<script src="./art-template/art-template.js"></script>
<script src="./jquery-3.6.0/jQuery3.6.js"></script>
<style type="text/css">
  *{
    padding: 0;
    margin: 0;
    text-decoration: none;
  }
  a{
    color: #000;
  }
  .news-item{
    margin: 20px;
    width: 800px;
    border: #d8d8d8 1px solid;
    border-radius: 4px;
    padding: 10px;
  }
  .news-item .thumb{
    
    width: 200px;
    height: 150px;
    background-color: #b2b2b2;
    float: left;
    margin-right: 10px;
    border: none;
    border-radius: 8px;
  }
  .news-item::after{
    content: "";
    display: block;
    clear: left;
  }
  .news-item .right-box .title{
    font-size: 24px;
    font-weight: normal;
  }
  .news-item .right-box div{
    margin-top: 20px;
  }
  .news-item .right-box .radius span{
    background-color: #eee;
    padding: 2px;
    border-radius: 10px;
    margin-right: 10px;
  }

  .news-item .footer div{
    float: left;
    margin-top: 2px;
  }
  .news-item .footer div span{
    margin-right: 8px;
  }
  .news-item .footer span{
    float: right;
    margin-top: 2px;
    font-size: 16px;
  }
</style>
<body>
  <div class="news-list"></div>

  <!-- 模板 -->
  <script type="text/html" id="tpl-news">
    {{each data}}
    <div class="news-item">
      <img class="thumb" src="http://www.liulongbin.top:3006{{$value.img}}" alt="">
      <div class="right-box">
        <h1 class="title">
          {{$value.title}}
        </h1>
        <div class="radius">
          {{each $value.tags}}
          <span>{{$value}}</span>
          {{/each}}
          <!-- <span>中国移动</span>
          <span>5G商用</span> -->
        </div>
        <div class="footer">
          <div>
            <span>{{$value.time | datafilter}}</span>
            <span>{{$value.source}}</span>&nbsp;
          </div>

          <span>评论数：{{$value.cmtcount}}</span>
        </div>
      </div>
    </div>
    {{/each}}
  </script>

  <script type="text/javascript">
    $(function(){
      //定义过滤器
      template.defaults.imports.datafilter = function(res){
        var data = new Date(),
            y = data.getFullYear(),
            m = data.getMonth() + 1,
            d = data.getDate(),
            hh = data.getHours(),
            mm = data.getMinutes(),
            ss = data.getSeconds();

        return `${y}-${togle(m)}-${togle(d)} ${togle(hh)}-${togle(mm)}-${togle(ss)}`;
      }

      function togle(val){
        return val< 2 ? 10 + val.length : val;
      }

      // 获取新闻列表的函数
      function getNewsList(){
        $.ajax({
          type: "get",
          url: "http://www.liulongbin.top:3006/api/news",
          success: function(res){
            // console.log(res)
            if(res.status !== 200){
              return alert("获取失败!");
            }
            
            for(var i = 0; i < res.data.length; i++){
              res.data[i].tags = res.data[i].tags.split(",")
            }
            console.log(res);
            var htmlStr = template("tpl-news", res);
            var odiv = document.getElementsByClassName("news-list")[0];
            odiv.innerHTML = htmlStr;
          }
        })
      }
      getNewsList();

    })
  </script>
</body>
</html>